<!-- 抽奖 -->
<template>
  <div class="my">
    <!-- 点击时候转动转盘 指针不转 -->
    <div class="main">
      <img
        :style=" 'transform: rotate(' +deg+ 'deg);  transition-duration: ' +time+'s ;'  "
        src="/static/images/dipan.png"
        style="width: 100%;height: 100%;"
        class="turntable"
      />
      <img @click="start" class="start" src="/static/images/Lucky1.png" />
    </div>
    <div class="rules">
      <p class="my-p1">活动规则：</p>
      <div class="my-title">
        <p>1.活动时间为2019-02-12至2019-12-31</p>
        <p>2.用户在活动时间内累计签到5次，即可参与大抽奖活动</p>
        <p>3.活动奖品以代金券的形式进行发放</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},

  data() {
    //这里存放数据
    return {
      showTitle: true, // 判断是否中奖
      time: 5, // 旋转所用时间
      deg: 0, // 旋转角度
      luck: false,
      arr: [
        { deg: 0, msg: "红包利息0.1%", id: "1" },
        { deg: 45, msg: "红包10元", id: "2" },
        { deg: 90, msg: "现金红包1元", id: "3" },
        { deg: 135, msg: "财金币20", id: "4" },
        { deg: 180, msg: "红包20", id: "5" },
        { deg: 225, msg: "红包利息0.5%", id: "6" },
        { deg: 270, msg: "红包50元", id: "7" },
        { deg: 315, msg: "红包5元", id: "8" }
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //点击开始
    start() {
      if (this.luck) {
        return;
      }
      this.luck = true; // 关锁
      let index = 1; //中奖的索引位置，axios:接口请求获得中奖的数据信息
      this.play(index);
    },

    //根据索引开始旋转
    play(index) {
      this.deg = 360 * 3 + this.arr[index].deg + 20;
      setTimeout(() => {
        this.showRes(this.arr[index]);
      }, this.time * 1000);
    },

    //　展示结果
    showRes(data) {
      console.log(data); //获取的奖品数据
      if (data.msg == "谢谢参与") {
        //未中奖
        this.showTitle = false;
        var _this = this;
        wx.showModal({
          title: "抽奖结果",
          content: data.msg,
          success(res) {
            if (res.confirm) {
              _this.closeModal();
            } else if (res.cancel) {
              _this.closeModal();
            }
          }
        });
      } else {
        //中奖
        this.showTitle = true;
        var _this = this;
        wx.showModal({
          title: "抽奖结果",
          content: "恭喜您获得" + data.msg,
          success(res) {
            if (res.confirm) {
              _this.closeModal();
            } else if (res.cancel) {
              _this.closeModal();
            }
          }
        });
      }
    },
    //　关闭后重新开始
    closeModal() {
      this.luck = false; //开锁
      let s = this.time;
      this.time = 0; //恢复旋转时间0
      this.deg = 0; //恢复旋转角度0
      setTimeout(() => {
        this.time = s; //旋转所用时间5
      }, 100);
    }
  },
  onLoad() {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.my {
  width: 100%;
  height: 100vh;
  background: #ffffff;
  padding-top: 40rpx;

  .main {
    position: relative;
    width: 312px;
    height: 312px;
    margin: auto;

    .turntable {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      transform: rotate(0deg);
      z-index: 12;
      transition-timing-function: ease;
      transition-property: all;
    }

    .start {
      width: 95px;
      height: 114px;
      position: absolute;
      top: 90px;
      right: 0;
      left: 0;
      margin: auto;
      z-index: 99;
    }
  }
}

@keyframes rotateArc {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(3600deg);
  }
}
.my-p1 {
  font-size: 34rpx;
  color: #ff634e;
  margin-left: 40rpx;
  margin-top: 40rpx;
  margin-bottom: 20rpx;
}
.my-title > p {
  font-size: 30rpx;
  color: #848484;
  margin-left: 60rpx;
  line-height: 50rpx;
}
</style>